

<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router'
import { Dock, useToast, Dialog, Toast } from '@/utils/primevue'
import type { MenuItem } from 'primevue/menuitem';
import useMacModalStore from '@/stores/macModal';

const toast = useToast();

const router = useRouter()
const macModal = useMacModalStore()


const items = ref<MenuItem[]>([
  {
    label: '访达',
    icon: "https://primefaces.org/cdn/primevue//images/dock/finder.svg",
    command: () => {

    }
  },
  {
    label: '启动台',
    icon: 'http://mms0.baidu.com/it/u=3264363180,1880178590&fm=253&app=138&f=PNG?w=200&h=200',
    command: () => {
      // emits('update:visible', { ...props.visible, launch: true })
      // router.push('/launch')
      macModal.launch.visible = true
    }
  },
  {
    label: '终端',
    icon: "https://primefaces.org/cdn/primevue//images/dock/terminal.svg",
    command: () => {
      // router.push('/terminal')
      macModal.terminal.visible = true
    }
  },
  {
    label: 'App Store',
    icon: "https://primefaces.org/cdn/primevue//images/dock/appstore.svg",
    command: () => {
      toast.add({ severity: 'error', summary: 'An unexpected error occurred while signing in.', detail: 'UNTRUSTED_CERT_TITLE', group: 'tc', life: 3000 });
    }
  },
  {
    label: 'Safari',
    icon: "https://primefaces.org/cdn/primevue//images/dock/safari.svg",
    command: () => {
      // window.open('https://www.baidu.com')
      macModal.brower.visible = true

    }
  },
  {
    label: 'Photos',
    icon: "https://primefaces.org/cdn/primevue//images/dock/photos.svg",
    command: () => {

    }
  },
  {
    label: 'GitHub',
    icon: "https://primefaces.org/cdn/primevue//images/dock/github.svg",
    command: () => {
      window.open('https://www.github.com')
    }
  },
  {
    label: 'Trash',
    icon: "https://primefaces.org/cdn/primevue//images/dock/trash.png",
    command: () => {
      toast.add({ severity: 'info', summary: 'Empty Trash', life: 3000 });
    }
  }
]);

const onDockItemClick = (event: any, item: MenuItem) => {
  if (item.command) {
    item.command(event);
  }

  event.preventDefault();
};


</script>

<!-- https://primefaces.org/cdn/primevue/images/dock/window.jpg -->
<template>
  <div class="dock-window" >
    <slot name="desktop"></slot>
    <Dock :model="items" position="bottom">
      <template #item="{ item }">
        <a href="#" class="p-dock-link" v-tooltip.top="item.label" @click="onDockItemClick($event, item)">
          <img :alt="(item.label as string)" :src="item.icon" style="width: 100%" />
        </a>
      </template>
    </Dock>
  </div>

  <slot name="dialog"></slot>
  <Toast position="top-center" group="tc" />
</template>

<style scoped>
.dock-window {
  width: 100%;
  height: 100%;
  position: relative;
  background-image: url("@/assets/images/image03.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 1;
}

.dock-demo>.p-dock {
  z-index: 1000;
}
</style>
